<template>
  <view class="article-detail">
    <!-- 文章头部信息 -->
    <view class="article-header">
      <view class="article-title">{{ detail.title }}</view>
      <view class="article-meta">
        <view class="meta-item">
          <image src="/static/default_user.png" class="author-avatar" mode="aspectFill"></image>
          <text class="author-name">{{ detail.author }}</text>
        </view>
        <view class="meta-item">
          <image src="/static/info/time.png" class="time-icon" mode="aspectFit"></image>
          <text class="publish-time">{{ formatTime(detail.publish_time || detail.create_time) }}</text>
        </view>
        <view class="meta-item">
          <text class="view-count">阅读 {{ detail.view_count || 0 }}</text>
        </view>
      </view>
    </view>
    
    <!-- 文章内容 -->
    <view class="article-content">
      <u-parse :html="detail.content"></u-parse>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {}
			}
		},
    onLoad({ id }) {
      this.loadArticleDetail(id);
    },
		methods: {
      // 加载文章详情
      async loadArticleDetail(id) {
        try {
          uni.showLoading({
            title: '加载中...'
          });
          
          const response = await this.$api.getArticle(id);
          this.detail = response;
          
          // 增加阅读量
          this.increaseViewCount(id);
          
        } catch (error) {
          console.error('加载文章详情失败:', error);
          uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
          });
        } finally {
          uni.hideLoading();
        }
      },
      
      // 增加阅读量
      async increaseViewCount(id) {
        try {
          await this.$api.updateArticle(id, {
            view_count: (this.detail.view_count || 0) + 1
          });
        } catch (error) {
          console.error('更新阅读量失败:', error);
        }
      },
      
      // 格式化时间
      formatTime(timeStr) {
        if (!timeStr) return '';
        
        const now = new Date();
        const time = new Date(timeStr);
        const diff = now - time;
        
        const minutes = Math.floor(diff / (1000 * 60));
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        
        if (minutes < 60) {
          return `${minutes}分钟前`;
        } else if (hours < 24) {
          return `${hours}小时前`;
        } else if (days < 30) {
          return `${days}天前`;
        } else {
          return time.toLocaleDateString();
        }
      }
		}
	}
</script>

<style lang="scss">
.article-detail {
  min-height: 100vh;
  background-color: #ffffff;
  
  // 文章头部样式
  .article-header {
    padding: 32rpx 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .article-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 1.4;
      margin-bottom: 24rpx;
    }
    
    .article-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24rpx;
      
      .meta-item {
        display: flex;
        align-items: center;
        
        .author-avatar {
          width: 32rpx;
          height: 32rpx;
          border-radius: 16rpx;
          margin-right: 8rpx;
        }
        
        .author-name {
          font-size: 26rpx;
          color: #666666;
        }
        
        .time-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        
        .publish-time {
          font-size: 26rpx;
          color: #999999;
        }
        
        .view-count {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }
  
  // 文章内容样式
  .article-content {
    padding: 24rpx;
    
    // 富文本内容样式调整
    :deep(.u-parse) {
      font-size: 30rpx;
      line-height: 1.6;
      color: #333333;
      
      // 图片样式
      img {
        max-width: 100%;
        height: auto;
        border-radius: 8rpx;
        margin: 16rpx 0;
      }
      
      // 标题样式
      h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
        margin: 24rpx 0 16rpx 0;
        color: #333333;
      }
      
      // 段落样式
      p {
        margin: 16rpx 0;
        text-align: justify;
      }
      
      // 链接样式
      a {
        color: #539DF3;
        text-decoration: none;
      }
      
      // 列表样式
      ul, ol {
        padding-left: 32rpx;
        margin: 16rpx 0;
      }
      
      li {
        margin: 8rpx 0;
      }
    }
  }
}
</style>
